<template>
  <div class="enterprisesInResidenceCon">
    <div ref="enterprisesInResidence" class="enterprisesInResidence"></div>
   <!-- <div ref="enterpriseranking" class="enterpriseranking"></div>-->
  </div>

</template>

<script>
  export default {
    name: 'enterprisesInResidence',
    components: {

    },
    data() {
      return {
        indexCur: 0,
        companyTypeId: '1',
        rightdata: {},
        // color:['#00e3ff','#fedf7a','#ff8c33','#b43de0','#6249ff','#007ffe','#00e3ff'],
        color: ['#47f7f4', '#007ffe', '#fef102', '#ed6842', '#71f3b7', '#ffa939'],
      }
    },
    mounted() {

      var _this = this;
      _this.getEnterprisesInResidenceData()
      setInterval(() => {
        _this.getEnterprisesInResidenceData()
      }, 15000);
    },
    methods: {
      formatNumberRgx(num) {
        var parts = num.toString().split(".");
        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return parts.join(".");
      },
      getEnterprisesInResidenceData() {
        var _this = this;
        var that = this;
        var arrCompanyTypeId = new Array();
        const enterprisesInResidence = this.$refs.enterprisesInResidence;
        if (enterprisesInResidence) {
          const myChart = this.$echarts.init(enterprisesInResidence)

          this.$myHttp.post("getCompanyInfo")
            .then(function(data0) {
              if (data0.status == "200") {
                var dataR = new Array();
                var data = {};
                data.seriesData = [];
                data.legendData = [];
                data.selected = {};
                var idOfCompanyType = {};
                idOfCompanyType['1'] = '跨境电商物流企业';
                idOfCompanyType['3'] = '制造企业';
                idOfCompanyType['2'] = '外贸货代企业';
                idOfCompanyType['5'] = '其他';
                idOfCompanyType['4'] = '电商企业';
                idOfCompanyType['9'] = '报关企业';
                data0.data.cmps.forEach((item, index) => {
                  var map = {};
                  map.value = item.COUNTOFCOMPANY;
                  map.name = idOfCompanyType[item.COMPANYTYPEID];

                   map.companyTypeId  = item.COMPANYTYPEID;
                  if(map.name){
                      dataR.push(map);
                      arrCompanyTypeId.push(item.COMPANYTYPEID);// 传入公司类型
                    }


                })

                data.seriesData = dataR;
                if (_this.indexCur >= dataR.length) {
                  _this.indexCur = 0;
                }

                data.seriesData[_this.indexCur].selected = true;

                _this.companyTypeId = data.seriesData[_this.indexCur].companyTypeId;
                 _this.getEnterpriserankingData(_this.companyTypeId,_this.color[ _this.indexCur])
                _this.indexCur++;

                const option = {
                  grid: {
                    containLabel: true
                  },
                  series: [{
                    /* itemStyle: {
                       normal: {
                         borderWidth: 1,
                         borderColor: '#012259',
                       }
                     },*/
                     color:_this.color,
/*
                    color: [
                      new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#1a9eed'
                      }, {
                        offset: 1,
                        color: '#1892ef'
                      }]),
                      new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#1db2ea'
                      }, {
                        offset: 1,
                        color: '#1a9eed'
                      }]),
                      new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#20c8e7'
                      }, {
                        offset: 1,
                        color: '#1db2ea'
                      }]),
                      new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#23dce5'
                      }, {
                        offset: 1,
                        color: '#20c8e7'
                      }]),
                      new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#25eae3'
                      }, {
                        offset: 1,
                        color: '#23dce5'
                      }]),
                    ],
                    */
                    type: 'pie',
                    radius: ['30%', '60%'],
                    center: ['50%', '42%'],
                    minAngle: 40,
			              startAngle: 120,
                    // avoidLabelOverlap: false,
                    data: data.seriesData, //数组
                    emphasis: {
                      itemStyle: {
                        shadowBlur: that.commonFunction.fontSize(0.1),
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                    },

                    label: {
                      normal: {
                        show: true,
                        // position: 'right',
                        textStyle: {
                          fontSize: that.commonFunction.fontSize(0.12),
                          color: '#fff',
                          lineHeight: that.commonFunction.fontSize(0.12),
                        },
                        formatter: function(params) {
                          if (params.name !== '') {
                            let res = params.name + " " + params.percent.toFixed(0) + "%";
                            return res;
                          } else {
                            return '';
                          }
                        },
                      }
                    },
                    // labelLine: {
                    //   show: true,
                    //   length: 0.01
                    // },
                  }]
                };
                myChart.setOption(option)
                window.addEventListener("resize", function() {
                  myChart.resize()
                })


              }
            })
        }
      },

      getEnterpriserankingData(companyTypeId,color) {
        var _this = this;
        var that = this;

        var dataSeries = [];
        var yAxisDisply = [];
        var enterpriseranking = _this.$refs.enterpriseranking;
        var changetitle='';
        var changecolor=[ ''];
        switch(companyTypeId){
            case '1':{
              changetitle='电商企业单量TOP5(万包)';
              break;
            }
            case '2':{
              changetitle='网商企业单量TOP5(万包)';
              break;
            }
            case '3':{
              changetitle='物流企业单量TOP5(万包)';
              break;
            }
            case '4':{
              changetitle='仓储企业单量TOP5(万包)';
              break;
            }
            case '5':{
              changetitle='支付企业单量TOP5(万包)';
              break;
            }
            case '9':{
              changetitle='报关企业单量TOP5(万包)';
              break;
            }
            default:{
              changetitle='电商企业单量TOP5(万包)';
            }
          }
        if (enterpriseranking) {
          const myChart = _this.$echarts.init(enterpriseranking)

          _this.$myHttp.get("getCompanyDanLiang", {
              params: {
                companyTypeId: companyTypeId
              }
            })
            .then(function(data0) {
              if (data0.status == "200") {

                //  datas = data0.data.cmp_dl;
                _this.rightdata = data0.data.cmp_dl;

                data0.data.cmp_dl.forEach((item, index) => {
                  if(index>=5){
                    return false;
                  };
                  yAxisDisply.push(item.COMPANYSHORT)
                  dataSeries.push(item.DANLIANG)
                })

                // console.log('请求的企业ID' + _this.companyTypeId)
                // console.log('企业数据')
                // console.log(yAxisDisply)
                dataSeries.reverse();
                yAxisDisply.reverse();



                const option = {
                  title: {
                    show: true,
                    text: changetitle,
                    textStyle: {
                      color:color,
                      fontWeight: that.commonFunction.fontSize(1),
                      fontSize: that.commonFunction.fontSize(0.12),
                      fontWeight:'bloder',

                    },
                    left: 'center',
                  },

                  legend: {
                    data: [''],
                    show: false
                  },
                   grid: {
                    left: '40%', // 与容器左侧的距离
                    right: '20%',
                    top: '0%',
                    bottom: '10%' // 与容器右侧的距离

                  },
                  xAxis: {
                    name: '万单',
                    show: false,
                    type: 'value',
                    scale: true,
                    axisLine: {
                      show: true,
                      textStyle: {
                        color: '#fff'
                      },
                      lineStyle: {
                        color: '#1d5db7',
                        width: '1'
                      }
                    },
                    splitNumber: 3,
                    axisTick: { // 坐标轴小标记
                      lineStyle: { // 属性lineStyle控制线条样式
                        color: '#fff'
                      }
                    },
                    axisLabel: {
                      show: true,
                      textStyle: {
                        color: '#fff'
                      },
                      rotate: -45
                    },
                    splitLine: {
                      show: false
                    }
                  },
                  yAxis: {
                    type: 'category',
                    data: yAxisDisply,
                    scale: true,

                    axisLine: {
                      show: true,
                      textStyle: {
                        color: '#c3dbff', //更改坐标轴文字颜色
                        fontSize: that.commonFunction.fontSize(0.12)//更改坐标轴文字大小
                      },
                      lineStyle: {
                        color: '#1d5db7',
                        width: '1'
                      }
                    },
                    axisTick: { // 坐标轴小标记
                      show: false,
                      lineStyle: { // 属性lineStyle控制线条样式
                        color: '#fff'
                      }
                    },
                    axisLabel: {
                      show: true,
                      textStyle: {
                        color: '#fff'
                      }
                    },
                  },
                  series: [{
                    name: '单量',
                    type: 'bar',
                    data: dataSeries,
                    barWidth: that.commonFunction.fontSize(0.12),
                    barMaxWidth: that.commonFunction.fontSize(0.15),
                    barGap: '35%',
                    color:color,
                    label: {
                      normal: {
                        show: true,
                        position: 'right',

                        textStyle: {
                          fontSize: that.commonFunction.fontSize(0.1),
                          color: '#B0CEFC'
                        },
                        formatter: function(params) {
                          // console.log(params)
                          if (params.value) {
                            return that.formatNumberRgx(params.value)
                          } else {
                            return '';
                          }
                        },

                      }
                    }
                  }]
                };


                myChart.setOption(option)
                window.addEventListener("resize", function() {
                  myChart.resize()
                })

              }
            })

        }
      },

    }
  }
</script>

<style>
  .enterprisesInResidenceCon {
    width: 100%;
    height: 95%;
    display: flex;
    align-items: flex-end;
    justify-content:center;
  }

  .enterprisesInResidenceCon>div {
    width: 100%;
    height: 100%;
  }
  .enterprisesInResidenceCon>div:nth-of-type(2) {
    width: 45%;
    height: 100%;
  }
</style>
